<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>css技巧(一) | 小小错题本</title>
    <meta name="description" content="此文引用自：火头军人 ,仅为学习目的。

在页面构建中，能明显提升页面显示质量的一些 CSS 小技巧。很多简洁美观的页面表现，可以使用 CSS3 代码即可实现，减少图片的使用。

一、边框内圆角

我们在设计例如按钮等控件的时候，会遇到这样的设计：只有内侧有圆角，而边框或者描 ...">
    <meta name="generator" content="VuePress 1.3.0">
    
    
    <link rel="preload" href="/wrong_question_static_page/assets/css/0.styles.f30cb765.css" as="style"><link rel="preload" href="/wrong_question_static_page/assets/js/app.9022c753.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/4.8c1e4aa5.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/5.33f70f09.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/11.488795fa.js" as="script"><link rel="prefetch" href="/wrong_question_static_page/assets/js/1.ec18c3a1.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/10.697d33d5.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/12.12a9963e.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/13.9d026eb1.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/14.c44f0e4a.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/15.a258b8bb.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/16.92328039.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/17.c4f16e4e.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/18.4dfa396f.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/19.edba2346.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/20.082608a3.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/21.5ae0ad82.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/22.89457782.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/23.53bf9e28.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/24.ae06dfc6.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/25.1d7d04a4.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/6.af07a62f.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/7.2c342931.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/8.2545b8d2.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/9.0eaa1c27.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/vuejs-paginate.c4011005.js">
    <link rel="stylesheet" href="/wrong_question_static_page/assets/css/0.styles.f30cb765.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/wrong_question_static_page/" class="nav-link home-link">小小错题本 </a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/wrong_question_static_page/tag/" class="nav-link">分类</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/wrong_question_static_page/" class="nav-link mobile-home-link">小小错题本 </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/wrong_question_static_page/tag/" class="nav-link">分类</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        css技巧(一)
      </h1> <div class="post-meta"><div itemprop="publisher author" itemtype="http://schema.org/Person" itemscope="itemscope" class="post-meta-author"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg> <span itemprop="name">kaiwen</span> <span itemprop="address">   in xi'an</span></div> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2018-08-12T00:00:00.000Z">
      Sun Aug 12 2018
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/css" data-v-2ac33c20> css </a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><blockquote><p>此文引用自：<a href="https://mp.weixin.qq.com/s/jxaFwejRpr5AeSZRJjptzA" target="_blank" rel="noopener noreferrer">火头军人<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> ,仅为学习目的。</p></blockquote> <p>在页面构建中，能明显提升页面显示质量的一些 CSS 小技巧。很多简洁美观的页面表现，可以使用 CSS3 代码即可实现，<strong>减少图片的使用</strong>。</p> <h2 id="一、边框内圆角"><a href="#一、边框内圆角" class="header-anchor">#</a> 一、边框内圆角</h2> <p>我们在设计例如按钮等控件的时候，会遇到这样的设计：只有内侧有圆角，而边框或者描边的四个角还是保持直角的形状，用以下代码可以轻松的实现。</p> <p><img src="https://s1.ax1x.com/2018/08/12/Pc6Rjx.png" alt="content"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token selector">;

  #content</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这种解决方案需要使用到两个 dom 元素，那么如果只使用一个 dom 元素，应该怎么实现？</p> <p>这里需要用到 CSS 的两个属性： box-shadow 和 outline 属性，具体属性参见 MDN。</p> <blockquote><p>box-shadow 属性有以下 5 个特性</p></blockquote> <ul><li>inset</li> <li>offset-x offset-y</li> <li>blur-radius</li> <li>spread-radius</li> <li>color</li></ul> <p>这里我们将使用第四个属性 spread-radius 来填充效果当中的空白。同时利用 outline 的特性：描边不跟随边框绘制的特点来实现（因为不清楚这是不是一个 bug，所以在将来的版本中可能会改变），具体代码如下。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 0 10px <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">outline</span><span class="token punctuation">:</span> 10px solid <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2018/08/12/Pc6IED.png" alt="content2"></p> <p>这种实现方式，对于边框的宽度和圆角的大小有一定的限制效果。仅当边框宽度 w 与圆角半径 r 存在 w ≥ (√2-1)r 关系时才可实现.</p> <h2 id="二、条纹背景"><a href="#二、条纹背景" class="header-anchor">#</a> 二、条纹背景</h2> <p>如何使用 CSS 来实现条纹？</p> <p><img src="https://s1.ax1x.com/2018/08/12/Pc6oUe.png" alt="content3"></p> <ol><li>使用 linear-gradient 属性实现</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#stripe</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2018/08/12/Pc6qgI.png" alt="content4"></p> <ol start="2"><li>尝试修改 linear-gradient 属性，当 linear-gradient 属性</li></ol> <div class="language- extra-class"><pre class="language-text"><code>background: linear-gradient(rgb(255, 187, 51) 50%, rgb(85, 136, 187) 50%);
</code></pre></div><p><img src="https://s1.ax1x.com/2018/08/12/Pc6Lvt.png" alt="content5"></p> <ol start="3"><li>因为条纹是由 background-image 属性生成的，因此当然也可以使用 background-size 属性来改变它的大小</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-size</span><span class="token punctuation">:</span> 100% 40px<span class="token punctuation">;</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2018/08/12/PccCCj.png" alt="content6"></p> <p>如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。</p> <div class="language- extra-class"><pre class="language-text"><code>background: linear-gradient(rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);
</code></pre></div><p><img src="https://s1.ax1x.com/2018/08/12/PccGqK.png" alt="content7"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 33.3%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 0<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 66.6%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">)</span> 0
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="垂直条纹"><a href="#垂直条纹" class="header-anchor">#</a> 垂直条纹</h3> <div class="language- extra-class"><pre class="language-text"><code>background: linear-gradient(to right, rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);
</code></pre></div><p>默认值为 to bottom ，可以设置 to right; to left 等</p> <p><img src="https://s1.ax1x.com/2018/08/12/PccdGd.png" alt=""></p> <h3 id="斜条纹"><a href="#斜条纹" class="header-anchor">#</a> 斜条纹</h3> <p><img src="https://s1.ax1x.com/2018/08/12/PccwRA.png" alt=""></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>
  45deg<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 25%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 0<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 50%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 0%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 75%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 0
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-size</span><span class="token punctuation">:</span> 30px 30px<span class="token punctuation">;</span>
</code></pre></div><p>为了达到斜条纹等宽的视觉效果，需要运用到勾股定理来计算宽度。</p> <div class="language- extra-class"><pre class="language-text"><code>background-size: 42px 42px;
</code></pre></div><p>介绍 linear-gradient 的升级版 ： repeating-linear-gradient</p> <p>可以试着使用 linear-gradient 和 repeating-linear-gradient 实现同样的 60° 斜条纹进行对比</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>
  60deg<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 25%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 0<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 50%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 0<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 75%<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 0<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 100%
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-size</span><span class="token punctuation">:</span> 18px 31px<span class="token punctuation">;</span>

<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span>
  60deg<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span> 15px<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 0<span class="token punctuation">,</span>
  <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span> 30px
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="三、平行四边形和梯形"><a href="#三、平行四边形和梯形" class="header-anchor">#</a> 三、平行四边形和梯形</h2> <p>使用 transform 属性可以很轻松的创建一个平行四边形</p> <p><img src="https://s1.ax1x.com/2018/08/12/Pccsqf.png" alt="Pccsqf.png"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#content</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>-30deg<span class="token punctuation">)</span><span class="token selector">;
  span</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>缺点：需要两个元素、修改的话需要修改两个地方。</p> <p>如何使用一个元素就实现这样的效果。</p> <p>解决办法：将平行四边形的背景设置在伪元素上，对伪元素进行变形。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#content</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token selector">;
  &amp;::after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>-30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 187<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>梯形的概念比平行四边形更加宽泛，只需要两条边平行即可。梯形常用于标签页，之前常用伪元素方法来实现一个梯形。
<img src="https://s1.ax1x.com/2018/08/12/PccfRs.png" alt="PccfRs.png"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.trapezoid</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token selector">;
  &amp;::before,
  &amp;::after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">&amp;::before</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> -100px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> 180px solid transparent<span class="token punctuation">;</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> 0 solid transparent<span class="token punctuation">;</span>
    <span class="token property">border-right</span><span class="token punctuation">:</span> 100px solid <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">&amp;::after</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> -240px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> 180px solid transparent<span class="token punctuation">;</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> 0 solid transparent<span class="token punctuation">;</span>
    <span class="token property">border-left</span><span class="token punctuation">:</span> 240px solid <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>缺点：</p> <ul><li>把两个伪元素都使用了；</li> <li>需要修改形状时，需要修改的方过多；</li> <li>不能给梯形加边框、阴影；</li> <li>不能设置成圆角梯形；</li></ul> <p>通过构造平行四边形的思想，对矩形进行变形。但是这次不采用 2d 平面的变形，而是 3d 平面变形，通过视觉差来构造一个梯形。</p> <p>这里需要用到 transform 属性 3d 变换特性：</p> <ul><li>perspective</li> <li>rotate3d (rotateX rotateY rotateZ)</li> <li>transform-origin</li> <li>scale3d (scaleX scaleY scaleZ)
实现一个最简单的梯形所需要的代码只有以下一行：</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">perspective</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>与 2d 变换不同，3d 内部变形是不可逆的，因此与构造平行四边形相似，我们也可以将图形的变形放在伪元素上。</p> <p><img src="https://s1.ax1x.com/2018/08/12/PccIs0.png" alt="PccIs0.png"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.trapezoid</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token selector">;
  &amp;::before</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">perspective</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>优化</p> <p>1、修改 transform-origin 属性，控制转动轴</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span>
</code></pre></div><p>2、通过 scale3d 属性而非 padding 属性来修正视觉大小，同时兼顾了优雅降级</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">perspective</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>2.25<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>3、添加圆角、阴影、背景渐变</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> <span class="token function">rgb</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 170<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px 10px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>85<span class="token punctuation">,</span> 136<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>4、改变 transform-origin 得到不同斜边的梯形</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">perspective</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>10deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
</code></pre></div><p>缺点</p> <p>斜边的角度依赖于元素的宽度。因此，当元素的内容长度不等时，想要得到斜度一致的梯形就不容易了。</p> <p>3d 变换具体实现原理参见 matrix3d</p> <h2 id="四、阴影"><a href="#四、阴影" class="header-anchor">#</a> 四、阴影</h2> <p>投影首先会想到 box-shadow 这个属性，根据以上的介绍，我们可以轻松的做出一个元素的阴影</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#shadow</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 187<span class="token punctuation">,</span> 51<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 240px 120px 0 0 red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>那么如何针对一张图片实现其对应的阴影？在页面的例如头像显示会遇到这种效果
<img src="https://s1.ax1x.com/2018/08/12/PccboF.jpg" alt="PccboF.jpg"></p> <p>这里将会使用到 CSS3 里面的 filter 属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#logo</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>'../img/logo.svg'<span class="token punctuation">)</span></span> no-repeat<span class="token selector">;
  &amp;::after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>'../img/logo.svg'<span class="token punctuation">)</span></span> no-repeat<span class="token punctuation">;</span>
    <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 100%<span class="token punctuation">;</span>
    <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>10px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer><!----> <hr> <!----></footer></article> <div class="sticker vuepress-toc"><div class="vuepress-toc-item vuepress-toc-h2 active"><a href="#一、边框内圆角" title="一、边框内圆角">一、边框内圆角</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#二、条纹背景" title="二、条纹背景">二、条纹背景</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#垂直条纹" title="垂直条纹">垂直条纹</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#斜条纹" title="斜条纹">斜条纹</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#三、平行四边形和梯形" title="三、平行四边形和梯形">三、平行四边形和梯形</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#四、阴影" title="四、阴影">四、阴影</a></div></div></div></div> <footer class="footer" data-v-06e1b74b><div class="footer-left-wrap" data-v-06e1b74b><ul class="contact" data-v-06e1b74b></ul></div> <div class="footer-right-wrap" data-v-06e1b74b><ul class="copyright" data-v-06e1b74b></ul></div></footer></div><div class="global-ui"><!----></div></div>
    <script src="/wrong_question_static_page/assets/js/app.9022c753.js" defer></script><script src="/wrong_question_static_page/assets/js/4.8c1e4aa5.js" defer></script><script src="/wrong_question_static_page/assets/js/5.33f70f09.js" defer></script><script src="/wrong_question_static_page/assets/js/11.488795fa.js" defer></script>
  </body>
</html>
